<template>
  <div>
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 94%">
      <el-table-column label="商品编号(条码)" prop="pid"/>
      <el-table-column label="商品名称" prop="name"/>
      <el-table-column label="所属分类" prop="type"/>
      <el-table-column label="折扣" prop="discount"/>
      <el-table-column label="会员折扣" prop="vipDiscount"/>
      <el-table-column label="库存剩余" prop="stock"/>
      <el-table-column align="left">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入商品关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">删除产品
              </el-button>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">下架
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="4">
              <el-button size="mini" @click="genCode(scope.$index, scope.row)">生成条码
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="'商品-' + dialog.title+'-条码'" :visible.sync="dialogVisible" :close-on-click-modal="true"
               :modal="true"
               :show-close="true"
               :center="true" @open="genCode(0,0)">
      <img id="barcode"/>
      <canvas class="qrCode" id="canvas"></canvas>
      <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
   </span>
    </el-dialog>
  </div>
</template>
<style>
  .qrCode {
    border: 1px solid black;
    margin: 0;
    padding: 0;
    width: 200px !important;
    height: 200px !important;
  }
</style>

<script>
  import JsBarcode from 'jsbarcode'
  import QrCode from 'qrcode'

  export default {
    name: "LookProducts",
    components: {QrCode},
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        search: '',
        dialog: {
          title: ''
        }
      }
    },
    methods: {
      genCode(index, row) {
        this.dialog.title = row.name
        this.dialogVisible = true
        const ss = document.getElementById("barcode")
        if (!ss) {
          setTimeout(this.code, 100, row.pid, row.name)
        } else {
          this.code(row.pid, row.name)
        }
      },
      code(data, data2) {
        JsBarcode("#barcode", data, {
          font: "sans-serif",
          format: "CODE128",//选择要使用的条形码类型
          text: data + "\n" + data2,
          displayValue: true,//是否在条形码下方显示文字
          textPosition: "bottom"//设置文本的垂直位置
        })
        const canvas = document.getElementById('canvas')
        // QrCode.
        let ss = QrCode.toCanvas(canvas, data, {version: 4, mask: 200}, function (error) {
          console.log(error)
        })
        console.log(ss)
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
    beforeMount() {
      this.$http({
        url: this.Host + '/products/list',
        method: 'GET',
      }).then(result => {
        console.log(result)
        console.log(result.data.message === 'success')
        if (result.data.message === 'success') {
          this.tableData = result.data.data
          // that.$router.push({path: '/'})
        }
        console.info("sdssd")
      }).catch(error => {
        console.info("ff")
      })
    }
  }
</script>

